<!-- 上传合同扫描件 -->
<template>
	<div>
		<el-dialog
			v-model="state.dialogVisible"
			:title="type + '合同扫描件'"
			width="35%"
			conter
			:before-close="handleClose"
		>
			<el-form
				:model="form"
				label-width="120px"
				:hide-required-asterisk="type == '下载'"
			>
				<el-form-item label="招标项目任务">
					<el-input v-model="form.projectTaskName" disabled />
				</el-form-item>
				<!-- signTime -->

				<el-form-item label="上传合同附件">
					<el-input v-model="form.file.fileName" disabled />
					<el-upload
						ref="upload"
						:show-file-list="false"
						v-if="type == '上传'"
						class="upload-demo m-l10"
						:http-request="update"
					>
						<template #trigger>
							<el-button class="btn_class button_edit" round>
								<svg-icon
									icon-class="project-detail-icon-l-shangchuan"
									class="icon"
								/>
								上传</el-button
							>
						</template>
					</el-upload>

					<el-button
						@click="handelDown"
						class="btn_class button_edit"
						round
						v-if="type == '下载'"
					>
						<svg-icon icon-class="project-detail-icon-l-xiazai" class="icon" />
						下载</el-button
					>
				</el-form-item>
				<el-form-item
					label="合同签订日期"
					prop="signTime"
					:rules="{
						required: true,
						message: '请选择合同签订日期',
						trigger: 'change',
					}"
				>
					<el-date-picker
						v-model="form.signTime"
						type="date"
						:disabled="type == '下载'"
						placeholder="选择日期"
						value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"
					/>
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button
						class="button_view"
						type="primary"
						@click="submit"
						v-if="type == '上传'"
					>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { reactive, watch } from "vue";
import { ElForm, ElDialog, ElMessage, ElUpload, ElLoading } from "element-plus";
import { processApi } from "@/api/biddingProject";
import { fileControlApi } from "@/api/assets";
import { fileCallback } from "@/api/common";

const props = defineProps({
	type: {
		type: String,
	},
});

const emits = defineEmits(["config"]);

const state = reactive({
	dialogVisible: false,
});
const form = reactive({
	file: {},
});

const open = () => {
	state.dialogVisible = true;
};
watch(
	() => state.dialogVisible,
	(val) => {
		if (!val && props.type == "上传") {
			emits("config");
		}
	}
);
const handleClose = () => {
	state.dialogVisible = false;
	for (let key in form) {
		form[key] = null;
	}
};

const getAnnex = (tenderTaskId) => {
	processApi.getAnnex(tenderTaskId).then((res) => {
		if (res.code == 200) {
			for (let key in res.data) {
				if (res.data[key]) {
					form[key] = res.data[key];
				}
			}
			console.log(form);
			open();
		}
	});
};
const submit = () => {
	processApi.saveAnnex(form).then((res) => {
		if (res.code == 200) {
			ElMessage.success("操作成功!");
			handleClose();
		}
	});
};

// el-upload 选择文件后
const update = (file) => {
	const loading = ElLoading.service({
		lock: true,
		text: "Loading",
		background: "rgba(0, 0, 0, 0.7)",
	});
	let uploadFile = new FormData();
	uploadFile.append("file", file.file);
	uploadFile.append("associationId", form.businessId);
	uploadFile.append("businessType ", 15);

	fileControlApi.uploadDocumentFile(uploadFile).then((res) => {
		if (res.code == 200) {
			loading.close();
			ElMessage.success("上传成功!");
			form.fileUrlKey = res.data.fileUrlKey;
			form.fileName = res.data.fileName;
			form.fileId = res.data.fileId;
			form.file = res.data;
		}
	});
};

const handelDown = () => {
	fileCallback({
		fileUrlKey: form.fileUrlKey || form.file.fileUrlKey,
		fileName: form.fileName || form.file.fileName,
	});
};

defineExpose({
	open,
	getAnnex,
});
</script>

<style lang="scss" scoped>
.el-form-item {
	.el-form-item__label {
		font-weight: 500;
		font-size: 16px;
	}
	.el-form-item__content {
		.el-input,
		:deep(.el-date-editor, .el-input__wrapper) {
			width: 350px;
		}
		.el-select,
		:deep(.el-input__wrapper) {
			width: 350px;
		}
	}
}
:deep(.el-input__wrapper) {
	width: 350px;
	height: 40px;
}
:deep(.el-date-editor) {
	width: 350px;
	height: 40px;
}
.btn_class {
	width: 88px;
	height: 40px;
	margin-left: 10px;
	// border: 1px solid #fc7018;
	// color: #fc7018;
	// background-color: #fff;
}
</style>
